import { Button, message, Form, Input, Card } from "antd";
import React, { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import style from "../index.module.css";
import {
  addHospitalRequest,
  getHosMesIdRequest,
  updateHosSetFromIdRequest
} from "@/api/hospital/hospitalSet";

import type { addHospitalParamType,updateHospitalParamType } from "@/api/hospital/model/hospitalSetType";

export default function AddOrUpdateHosSet() {
  const navigate = useNavigate();

  const [form] = Form.useForm();

  const { id } = useParams();
  console.log(id, "id");

  useEffect(() => {
    //因为组件复用，在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
    if (id) {
      const getHosDetail = async () => {
        //发送请求
        const result = await getHosMesIdRequest(id);
        console.log(result, "result");

        //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
        form.setFieldsValue(result);
      };
      getHosDetail();
    }
  });

  //1.新增医院的事件回调函数
  const addHospital = async (fieldValue: addHospitalParamType) => {
    await addHospitalRequest(fieldValue);    

    //新增成功以后返回医院设置页面
    navigate("/syt/hospital/hospitalSet");
    message.success("新增数据成功")
    
  };

  //2.修改医院的事件回调函数
  const updateHospital = async (fieldValue:updateHospitalParamType) => {
    //更新需要传id的值    
    fieldValue.id = id as string
    const result = await updateHosSetFromIdRequest(fieldValue)
    //修改成功以后返回医院设置页面
    navigate("/syt/hospital/hospitalSet");
    message.success("修改数据成功")
    
  };

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 18,
        }}
        onFinish={id?updateHospital:addHospital}
      >
        <Form.Item 
        label="医院名称" 
        name="hosname"
        rules={[{
          required:true,
          message: '请输入医院名称',
          transform(value){
            return value.trim()
          }
        }]}
        >
          <Input />
        </Form.Item>

        <Form.Item label="医院编号" name="hoscode"
        rules={[{
          required:true,
          message: '请输入医院编号',
          transform(value){
            return value.trim()
          }
        }]}>
          <Input />
        </Form.Item>
        <Form.Item label="api基础路径" name="apiUrl"
         rules={[{
          required:true,
          message: '请输入api基础路径',
          transform(value){
            return value.trim()
          }
        }]}>
          <Input />
        </Form.Item>

        <Form.Item label="联系人姓名" name="contactsName"
         rules={[{
          required:true,
          message: '请输入联系人姓名',
          transform(value){
            return value.trim()
          }
        }]}>
          <Input />
        </Form.Item>

        <Form.Item label="联系人手机" name="contactsPhone"
         rules={[{
          required:true,
          message: '请输入联系人手机',
          transform(value){
            return value.trim()
          }
        }]}>
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            保存
          </Button>
          <Button
            type="default"
            htmlType="button"
            onClick={() => {
              navigate(-1);
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
